<template>
  <el-dropdown size="small" trigger="click" @command="command"
               placement="bottom-end" class="el-button sea-dropdown-button">
    <el-button class="search-btn" size="small" :type="type" :title="title" @click="onClick">
      <i :class="icon"></i>
      {{ text }}
    </el-button>
    <el-dropdown-menu slot="dropdown" v-if="display" style="min-width: 100px">
      <el-dropdown-item v-for="(item, idx) in options" :key="idx" :command="item.value">
        {{ item.label }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
/* eslint-disable */

/**
 * 下拉按钮
 *
 * 拓展功能：增加一个前置事件，如果返回 false，可以组织下拉框展开
 */
export default {
    name: "SeaDropdownButton"
    , props: {
        // 按钮组
        text: {type: String, default: ''}
        // 按钮类型
        , type: {type: String, default: 'default'}
        // 按钮类型
        , icon: {type: String, default: 'fa fa-check-square-o'}
        // 鼠标悬浮提示
        , title: {type: String, default: undefined}
        // 按钮组
        , options: {type: Array, default: undefined}
        // 拦截下拉事件，返回 true 的时候，才回展开下拉框
        , interceptor: {type: Function, default: undefined}
    }
    , data() {
        return {
            display: true
        }
    }
    , methods: {
        /**
         * 点击展开下拉框
         */
        onClick: function () {
            if(this.interceptor !== undefined){
                let ret = this.interceptor();
                this.display = ret !== false;
            } else {
                this.display = true;
            }
        }
        /**
         * 下拉框的点击事件，回调参数为 options 中的 value 值
         */
        , command: function (val) {
            this.$emit('change', val);
        }
    }
}
</script>